<template>
  <el-carousel  :height="bannerHeight" :interval="5000" arrow="always">
    <el-carousel-item v-for="item in bannerUrl" :key="item.index">
      <!-- <img :src="item.url" > -->
      <router-link :to="item.href">
        <el-image ref="bannerheight" :src="item.url" alt="" fit="cover"></el-image>
      </router-link>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import './css.css'
export default {
  data() {
    return {
      bannerUrl:null,
      bannerHeight:(window.innerWidth / (1920/671))+'px'
    };
  },
  methods: {
    //获取数据
    async getData(){
      const {data:ret} = await this.$http.get('/static/img.json')
      this.bannerUrl = ret.banner
    },
    
  },
  mounted(){
    this.getData()
    addEventListener('resize',() =>{
      // console.log(this.$refs.bannerheight[0].$el.offsetHeight)
      this.bannerHeight = this.$refs.bannerheight[0].$el.offsetHeight+'px'
    })
  }
}
</script>

<style lang='less' scoped>

</style>